package com.znh.kuiklyuniversity.compose.mainPage

import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow
import com.tencent.kuikly.compose.foundation.Image
import com.tencent.kuikly.compose.foundation.background
import com.tencent.kuikly.compose.foundation.clickable
import com.tencent.kuikly.compose.foundation.layout.Arrangement
import com.tencent.kuikly.compose.foundation.layout.Box
import com.tencent.kuikly.compose.foundation.layout.Column
import com.tencent.kuikly.compose.foundation.layout.PaddingValues
import com.tencent.kuikly.compose.foundation.layout.Row
import com.tencent.kuikly.compose.foundation.layout.fillMaxSize
import com.tencent.kuikly.compose.foundation.layout.fillMaxWidth
import com.tencent.kuikly.compose.foundation.layout.height
import com.tencent.kuikly.compose.foundation.layout.padding
import com.tencent.kuikly.compose.foundation.lazy.LazyColumn
import com.tencent.kuikly.compose.foundation.lazy.grid.GridCells
import com.tencent.kuikly.compose.foundation.lazy.grid.LazyVerticalGrid
import com.tencent.kuikly.compose.foundation.lazy.rememberLazyListState
import com.tencent.kuikly.compose.foundation.pager.VerticalPager
import com.tencent.kuikly.compose.foundation.pager.rememberPagerState
import com.tencent.kuikly.compose.foundation.shape.RoundedCornerShape
import com.tencent.kuikly.compose.material3.MaterialTheme
import com.tencent.kuikly.compose.material3.Tab
import com.tencent.kuikly.compose.material3.TabRow
import com.tencent.kuikly.compose.material3.TabRowDefaults
import com.tencent.kuikly.compose.material3.TabRowDefaults.SecondaryIndicator
import com.tencent.kuikly.compose.material3.TabRowDefaults.tabIndicatorOffset
import com.tencent.kuikly.compose.material3.Text
import com.tencent.kuikly.compose.resources.DrawableResource
import com.tencent.kuikly.compose.resources.InternalResourceApi
import com.tencent.kuikly.compose.resources.painterResource
import com.tencent.kuikly.compose.ui.Alignment
import com.tencent.kuikly.compose.ui.Modifier
import com.tencent.kuikly.compose.ui.graphics.Color
import com.tencent.kuikly.compose.ui.layout.ContentScale
import com.tencent.kuikly.compose.ui.layout.onSizeChanged
import com.tencent.kuikly.compose.ui.text.style.TextAlign
import com.tencent.kuikly.compose.ui.unit.dp
import com.tencent.kuikly.compose.ui.unit.sp
import com.tencent.kuikly.core.base.attr.ImageUri
import com.tencent.kuikly.core.log.KLog
import com.znh.kuiklyuniversity.backgroundColor
import com.znh.kuiklyuniversity.compose.selfenum.AppColor
import com.znh.kuiklyuniversity.compose.widgets.PeopleWidget
import com.znh.kuiklyuniversity.compose.widgets.BarAndTotal
import com.znh.kuiklyuniversity.compose.widgets.ImageOneTxt
import com.znh.kuiklyuniversity.compose.widgets.ImageFourTxt
import com.znh.kuiklyuniversity.compose.widgets.ImageThreeTxt
import kotlinx.coroutines.launch

@OptIn(InternalResourceApi::class)
@Composable
fun ListPage() {
//    var coroutineScope= CoroutineScope()
    var coroutineScope = rememberCoroutineScope()
    val listState = rememberLazyListState()
    LaunchedEffect(listState) {
        snapshotFlow {
            listState.firstVisibleItemIndex to
                    listState.layoutInfo.visibleItemsInfo.size
        }.collect { (index, size) ->
            if (index + size >= listState.layoutInfo.totalItemsCount - 1) {
                // 到达底部回调
                KLog.i("znh", "---------------is Last-----------------")
            }
        }
    }
    Box {
        Image(
            contentDescription = "",
            modifier = Modifier
                .onSizeChanged { size ->
                    KLog.i("znh","---------------"+size.toString())
                }
                .fillMaxSize(),
            contentScale = ContentScale.Crop,
            alpha = 0.4f,
            painter = painterResource(
                DrawableResource(
                    ImageUri.commonAssets(
                        ListModel.dataBgList.get(
                            21
                        )
                    ).toUrl("")
                )
            )
        )
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            state = listState
        ) {
            item { PeopleWidget() }
            item {
                Box(modifier = Modifier.height(10.dp))
            }
            item {
                BarAndTotal()
            }
            item {
                Box(modifier = Modifier.height(10.dp))
            }
            item {
                var tabs: ArrayList<String> = arrayListOf("全部", "图片", "视频")
                var cutIndex by remember { mutableStateOf(0) }
                TabRow(
                    contentColor = Color.Transparent,
                    modifier = Modifier.background(Color.Transparent),
                    selectedTabIndex = cutIndex,
                    indicator = { tabPositions ->
                        SecondaryIndicator(
                            Modifier.tabIndicatorOffset(tabPositions[cutIndex]),
                            height = 1.dp,
                            color = Color.Red // 直接指定颜色值
                        )
                    },
                    divider = {
                        Box(modifier = Modifier.backgroundColor(Color.White).height(1.dp))
                    }

                ) {
                    tabs.forEachIndexed { index, tab ->
                        Tab(
                            selected = cutIndex == index,
                            onClick = {
                                coroutineScope.launch {
//                                栏目点击事件
                                    cutIndex = index
                                }
                            },
                            modifier = Modifier.background(Color.Transparent),
                            selectedContentColor = Color.Blue,
                            unselectedContentColor = Color.White
                        ) {
                            // Tab内容
                            Text(
                                tabs.get(index),
                                modifier = Modifier.padding(10.dp),
                                fontSize = 14.sp,
                                color = AppColor.TxtCom.color
                            )
                        }
                    }
                }
            }
            item {
                Box(modifier = Modifier.height(10.dp))
            }
            stickyHeader {
                Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.CenterStart) {
                    Text(
                        "置顶", color = AppColor.TxtCom.color, fontSize = 15.sp
                    )
                }
            }
            item {
                Box(modifier = Modifier.height(10.dp))
            }
            item {
                ImageThreeTxt()
            }

            item {
                Box(modifier = Modifier.height(10.dp))
            }
            item{
                ImageFourTxt()
            }
            item {
                Box(modifier = Modifier.height(10.dp))
            }

            item{
                ImageOneTxt()
            }

//            stickyHeader {
//                Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
//                    Text(
//                        "今天", color = Color.Blue,
//                        modifier = Modifier.height(45.dp),
//                        textAlign = TextAlign.Center
//                    )
//                }
//            }
        }
    }


//    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
//        var listChinse: List<String> = listOf("点", "横", "竖", "撇", "捺")
//        LazyColumn(
//            modifier = Modifier
//                .fillMaxSize()
//                .padding(16.dp),
//            state = listState
//        ) {
//            item {
//                TitleLayout(title = "购物车", showBack = false)
//            }
//            stickyHeader {
//                Text(
//                    "中文", color = Color.Blue,
//                    modifier = Modifier.height(45.dp),
//                    textAlign = TextAlign.Center
//                )
//            }
//            items(listChinse.size) {
//                Column {
//                    Text(
//                        listChinse.get(it),
//                        color = Color.Black,
//                        fontSize = 14.sp,
//                        modifier = Modifier.height(45.dp).padding(start = 16.dp),
//                        textAlign = TextAlign.Center
//                    )
//                }
//            }
//
//            item {
//                var showItemCount = 10
//                var vHight = 80
//                var colunms = 5
//                var itemHight = 20
//                Box(
//                    modifier = Modifier
//                        .fillMaxWidth()
//                        .height(vHight.dp)
////                        .padding(start = 16.dp)
//                ) {
//                    LazyVerticalGrid(
//                        columns = GridCells.Fixed(colunms),
//                        userScrollEnabled = false,
////                    userScrollEnabled 属性加以下内容，禁止滚动
////                    Modifier.pointerInput(Unit) {
////                    awaitPointerEventScope {
////                        while (true) {
////                            awaitPointerEvent()
////                        }
////                    }
////            }
//                        modifier = Modifier.fillMaxWidth()
//                            .pointerInput(Unit) {
//                                awaitPointerEventScope {
//                                    while (true) {
//                                        awaitPointerEvent()
//                                    }
//                                }
//                            },
//                        contentPadding = PaddingValues(
//                            start = 16.dp,
//                            end = 16.dp,
//                            top = 10.dp,
//                            bottom = 10.dp
//                        ),
//
//                        horizontalArrangement = Arrangement.spacedBy(12.dp),
//                        verticalArrangement = Arrangement.spacedBy(12.dp),
//                        content = {
//                            items(showItemCount) { index ->
//                                Box(
//                                    modifier = Modifier
//                                        .height(itemHight.dp)
//                                        .clip(RoundedCornerShape(6.dp))
//                                        .backgroundColor(Color(248, 249, 250)),
//                                    contentAlignment = Alignment.Center
//                                ) {
//                                    Box(
//                                        modifier = Modifier
//                                            .clickable {
//                                            }.backgroundColor(Color(0xFFF8F9FA))
//                                    ) {
//                                        Text(text = "栏目信息")
//                                    }
//                                }
//
//                            }
//                        }
//                    )
//                }
//            }
//
//            stickyHeader {
//
//                Text(
//                    "英文",
//                    color = Color.Blue,
//                    modifier = Modifier.height(45.dp),
//                    textAlign = TextAlign.Center
//                )
//            }
//            items(ListModel.dataBgList.size) { index ->
//                Column(modifier = Modifier.fillMaxWidth()) {
//                    Image(
//                        modifier = Modifier.fillMaxWidth(),
//                        contentScale = ContentScale.FillWidth,
//                        painter = painterResource(
//                            DrawableResource(
//                                ImageUri.commonAssets(ListModel.dataBgList.get(index)).toUrl("")
//                            )
//                        ),
//                        contentDescription = "图片"
//                    )
//                }
//            }
//
//        }
//    }
}


